<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <style>
      .chat {
        width: 300px;
        height: 500px;
        text-align: center;
        margin: 0 auto;
        border: 1px solid #ccc;
      }

      .message {
        width: 100%;
        height: 460px;
        overflow: auto;
      }

      #table {
        border: 1px solid;
      }
      .my-text {
        text-align: left;
      }
      .y-text {
        text-align: right;
      }
      .user {
        color: aqua;
      }
    </style>
  </head>

  <body>
    <div class="chat">
      <select name="" id="select" onchange="console.log()">
        <option value="deepseek">deepseek</option>
        <option value="">所有人</option>
      </select>
      <div class="message"></div>
      <div>我是<span id="_id"></span></div>
      <input id="text" type="text" placeholder="请输入聊天信息" />
      <button class="btn">发送信息</button>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>
    <!-- 这里socket不需要引用外部文件，node后台运行会自动生成可以引用的js文件 -->
    <!-- <script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script> -->
    <!-- <script src="/socket.io/socket.io.js"></script> -->
    <!-- <script src="./javascripts/underscore.min.js"></script> -->
    <script type="module">
      import { io } from "https://cdn.socket.io/4.3.2/socket.io.esm.min.js";
      let message = document.getElementsByClassName("message")[0];
      // let socket = io.connect('http://localhost:7012');
      let socket = io.connect(location.origin);
      //
      let userid = getUuid();
      let userLs = [];

      socket.emit("login", userid);
      //从服务端接收数据
      socket.on("login", function (data) {
        document.getElementById("_id").innerHTML = data;
      });
      socket.on("message", function (data) {
        // message.innerHTML += `<div class='y-text'>${data.message}:${data.id}</div>`;
        message.innerHTML += `
         <div class='y-text user'>${data.id}</div>
         <div class='y-text'>${data.message}</div>
         `;
        todown();
      });
      socket.on("sayTo", function (data) {
        message.innerHTML += `
         <div class='y-text user'>${data.id}</div>
         <div class='y-text'>${data.message}</div>
         `;
        todown();
      });
      let div = null;
      socket.on("chatai", function (data) {
        let msg = data.message.replace(/\n/g, "");

        if (msg.includes("</think>")) {
          div = document.createElement("div");
          div.className = "y-text";
          // div.innerHTML =`<div>:deepseek`;
          message.innerHTML += `<div class='y-text user'>deepseek</div>`;
          message.appendChild(div);
        }
        if (msg.includes("</stop>")) {
          div = null;
          return;
        }
        msg && !msg.includes("think") && (div.innerHTML += `${msg}`);
        // message.innerHTML += `deepseek:${data.message}` + "<br>";
        todown();
      });
      socket.on("userLs", function (data) {
        console.log(data);
        // let s = '<option value="">所有人</option>'
        if (data.length > 0) {
          for (let item of data) {
            $("#select").append(
              `<option value="${item.id}">${item.id}</option>`
            );
          }
        }
        // $("#select").append(`<option value="${data.id}">${data.id}</option>`)
      });
      socket.on("error", function (msg) {
        //错误提示
        alert(msg);
      });
      socket.on("logout", (data) => {
        // $("#select")[0].innerHTML = '<option value="">所有人</option>'
        message.innerHTML += `${data.logoutid}退出了`;
        // if (data.user.length > 0) {
        //     for (let item of data.user) {
        //         $("#select").append(`<option value="${item.id}">${item.id}</option>`)
        //     }
        // }
      });
      document.querySelector(".btn").onclick = chat;
      function chat() {
        let text = document.getElementById("text").value;
        if (!text) {
          alert("不能发送空消息！");
          return;
        }
        message.innerHTML += `<div class='my-text user'>我</div><div class='my-text'>${text}</div>`;
        document.getElementById("text").value = "";
        //向服务端发送数据
        if ($("#select option:selected").val()) {
          console.log($("#select option:selected").val());
          let user = $("#select option:selected").val();
          if (user == "deepseek") {
            socket.emit("chatai", {
              message: text,
            });
          } else {
            socket.emit("sayTo", {
              id: $("#select option:selected").val(),
              message: text,
            });
          }
          // return
        } else {
          console.log(text);
          socket.emit("message", { message: text });
        }
      }
      function getUuid() {
        // return Math.random().toString(36).slice(2, 6);
        function S4() {
          return (((1 + Math.random()) * 0x10000) | 0)
            .toString(16)
            .substring(1);
        }
        return (
          S4() +
          S4() +
          "-" +
          S4() +
          "-" +
          S4() +
          "-" +
          S4() +
          "-" +
          S4() +
          S4() +
          S4()
        );
      }

      function todown() {
        message.lastChild.scrollIntoView({ behavior: "smooth", block: "end" });
      }
    </script>
  </body>
</html>
